/**
 * Created by chenbaoxiang on 2020/11/30.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    ActivityIndicator,
    TouchableWithoutFeedback
} from 'react-native';

export default class HLActivityIndicator extends React.Component {

    static defaultProps = {
        message: '',        // 传入的提示内容
        isShow:false,       // loading的显示与隐藏
        loadColor:'#fff'    // loading的颜色
    };

    render() {
        if(this.props.isShow){
                return (
                    <TouchableWithoutFeedback>
                        {
                            this.props.message != '' ?    <View style={styles.container} >
                                <View style={styles.activeBg}>
                                    <ActivityIndicator
                                        animating={true}
                                        size="large"
                                        color={this.props.loadColor}
                                    />
                                    <Text style={styles.message}>
                                        {this.props.message +',please wait...'}
                                    </Text>
                                </View>
                            </View>
                                :
                                <View style={styles.container} >
                                    <ActivityIndicator
                                        animating={true}
                                        size="large"
                                        color={this.props.loadColor}
                                    />

                                </View>
                        }
                    </TouchableWithoutFeedback>
                )
        }
        return null;
    }
}



const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
        zIndex:888
    },

    activeBg:{
        padding:15,
        backgroundColor:'rgba(0,0,0,0.5)',
        borderRadius:2,
        justifyContent:'center',
        alignItems:'center',
        width:210,
        height:130
    },

    message:{
        color:'white',
        fontSize:14,
        marginTop:14,
        opacity:0.8,
        textAlign: 'center'
    }
})
